<template>
  <div>
    <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam" @hideCurr="hideCurrTran()"></navTop>
    <!--     <transition name="fade" mode="in-out"> -->
    <!-- <section class="scroll_container1" v-show="showPatList" index="0"> -->
    <section v-if="list.length == 0">
      <p class="loadingT">{{nonepatient}}</p>
    </section>
    <section v-if="list.length>0" class="list_container1" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
    >
      <ul class="deliverable_address">
        <li v-for="(item,index) in list" :key="item.id">
          <span class="choose_icon"><i class="iconfont icon-dui" @click="changePat(item.PATIENT_ID, item)" :class="{ choosed: item.DEFAULTBZ=='y' }"></i></span>
          <span @click="editPat(item.PATIENT_ID)">
            <p class="choose_content">
              <span>{{item.PATIENT_NAME}}&nbsp;{{item.PATIENT_SEX}}&nbsp;{{item.PATIENT_AGE}}</span>
            </p>
            <p class="choose_place1">
              <span>病历号码：{{item.PATIENT_BLHM}}</span>
            </p>
          </span>
          <span class="delete_adr">
            <input type="button" value="删除" class="remove_button" @click="removePat(item.PATIENT_ID)">
          </span>
        </li>
      </ul>
      <p class="loadingT">{{loadingText}}</p>
    </section>
    <p class="add_address" @click="setShowAddPat(true)">新增就诊人</p>
    <!-- <nuxt-link class="add_address" :to="{name:'wode-addPatient'}" tag="p">新增病人</nuxt-link> -->
    <!-- </section> -->
    <!--     </transition> -->
    <!--     <transition name="fade">
      <addPat v-show="showAddPat" @chgPatAdd="setHideAddPat($event)"></addPat>
    </transition> -->
    <mt-popup class="popAlert" style="width:95vw;over-flow:auto;"
      v-model="showAddPat"
      popupTransition="popup-fade"
      position="right"
      closeOnClickModal="false"
      modal="true"
    >
      <add-pat @chgPatAdd="setHideAddPat($event)"></add-pat>
    </mt-popup>
    <transition name="tipMove">
      <alert-tip :alertText="alertText" v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </transition>
    <transition name="fade" mode="out-in">
      <nuxt-child></nuxt-child>
    </transition>
  </div>
</template>
<script>
import navTop from '~/components/common/navTop';
import alertTip from '~/components/common/alertTip';
import addPat from '~/pages/wode/addPatient';

export default {
  data() {
    return {
      // 无就诊人的提示内容
      nonepatient: '未添加就诊人信息',

      // 分页参数
      busy: true,
      loadingText: '',
      page: 1,

      transition: {
        name: 'right-slide',
        mode: 'out-in',
      },
      showAddPat: false, // 是否显示添加病人
      showPatList: true,
      bkParam: 'bk', // 返回按扭的类型
      // props: ['chgPatSh'],
      headTitle: '就诊人管理',
      showBack: true,
      ts: this.newStore(),
      tq: this.getData(),
      DATA: {},
      DATA2: {
        rowsperpage: '10',
        page: '1',
        ordercolumn: 'cre_time',
        ordertype: 'desc',
      },
      DATA3: {},
      list: [
        /*
        { // 病人列表
          COUNTNUM: '', // 记录的数量
          PATIENT_ID: '',
          PATIENT_AGE: '',
          PATIENT_NAME: '',
          PATIENT_PIC_URL: '',
          PATIENT_SEX: '',
          PATIENT_MOBILE: '',
          PATIENT_OPENID: '',
          PATIENT_BLHM: '', // 病历号码
          CRE_TIME: '', // 添加该患者的时间
          ISDELETE: '', // 是否逻辑删除
          DEFAULTBZ: '', // 是否默认病人 y-n
        },
        */
      ],
      iscur: 0,
      alertText: '',
      showAlert: false,
    };
  },
  created() {
    // this.$root.showfooter = false;
    this.getPatientList(true);
  },
  destroyed() {
    // this.$root.showfooter = true;
  },
  components: {
    navTop,
    alertTip,
    addPat,
  },
  methods: {
    // 分页加载更多
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getPatientList(true);
      }, 500);
    },
    editPat(PATIENT_ID) {
      this.$router.push({
        name: 'wode-editPatient',
        query: { PATIENT_ID },
      });
    },
    // 设置显示病人
    setShowAddPat(msg) {
      console.log(`设置添加就诊人msg的值：${msg}`);
      this.showAddPat = msg;
      // this.showPatList = false;
    },
    setHideAddPat() {
      this.page = 1;
      this.list = [];
      this.showAddPat = false;
      this.getPatientList(true);
    },
    hideCurrTran() {
      console.log('patlist组件被调用，发起emit,chgPatShRes');
      this.$emit('chgPatShRes', false);
    },
    closeTip() {
      this.showAlert = false;
    },
    // 删除病人
    removePat(id) {
      this.$messagebox.confirm('确定删除该就诊人?').then((action) => {
        if (action == 'confirm') { // 确认的回调
          this.DATA.patient_id = id;
          this.tq.removePat(this.DATA).then((ts) => {
            if (ts.d.RESULT == '200') {
              this.page = 1;
              this.list = [];
              this.getPatientList(true);
              this.$messagebox('提示', '删除成功');
            } else {
              this.$messagebox('提示', `删除失败: ${ts.d.RESULTTEXT}`);
            }
          });
        }
      }).catch((err) => {
        /*
        if (err == 'cancel') { // 取消的回调
          this.$messagebox('提示', '取消删除');
        }
        */
      });
    },
    // removePat(id) {
    //   const res = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.06.02',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: { patient_id: id },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': res,
    //   }).then((ts) => {
    //     // this.list.splice(0, 1);
    //     console.log(`删除病人：${ts.d.RESULTTEXT}`);
    //     this.getPatientList();
    //   });
    // },
    // 获得病人列表
    getPatientList(flag) {
      this.DATA2.page = `${this.page}`;
      this.tq.getPatientList(this.DATA2).then((ts) => {
        // this.list = ts.d.DATAOBJ.DATA;
        if (flag) {
          this.list = this.list.concat(ts.d.DATAOBJ.DATA);
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '暂无更多数据';
          } else {
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.list = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }
      });
    },
    // getPatientList() {
    //   const req = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.06.05',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: {
    //         rowsperpage: '20',
    //         page: '1',
    //         ordercolumn: 'cre_time',
    //         ordertype: 'desc',
    //       },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': req,
    //   }).then((ts) => {
    //     console.log(`获取病人列表${JSON.stringify(ts.d.DATAOBJ.DATA)}`);
    //     this.list = ts.d.DATAOBJ.DATA;
    //   });
    // },
    // 修改默认病人
    changePat(id, patInfo) {
      this.DATA3.patient_id = id;
      this.tq.changePat(this.DATA3).then((ts) => {
        // this.page = 1;
        // this.list = [];
        // this.getPatientList(true);
        // this.$router.back(-1);
        // this.$emit('reSetPat', patInfo);
        if (ts.d.RESULT == '200') {
          this.page = 1;
          this.list = [];
          this.getPatientList(true);
          this.$messagebox('提示', '更新成功');
        } else {
          this.$messagebox('提示', `更新失败: ${ts.d.RESULTTEXT}`);
        }
        this.$emit('reSetPat', patInfo);
      });
    },
    // changePat(id, patInfo) {
    //   const req = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.06.06',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: { patient_id: id },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': req,
    //   }).then((ts) => {
    //     console.log(JSON.stringify(ts.d.RESULTTEXT));
    //     console.log(`修改默认病人：${ts.d.RESULT}`);
    //     this.getPatientList();
    //     // this.$router.back(-1);
    //     this.$emit('reSetPat', patInfo);
    //   });
    // },
  },
};
</script>
<style scoped>
.loadingT {
  margin-top: .5rem;
  text-align: center;
  color: #ccc;
}
.list_container1::-webkit-scrollbar {
    display: none;
}
.scroll_container1::-webkit-scrollbar {
    display: none;
}
.popAlert {
  right: 0;
  left: 0;
  margin: auto;
  width:95vw;
}
.right-slide-enter,
.right-slide-leave-active {
transform: translateX(130px);
}
.right-slide-leave-active,
.right-slide-enter-active {
transition: all 0.8s;
}

* {
  margin: 0;
  padding: 0;
}
.scroll_container1 {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.scroll_container p {
  margin-bottom: 0.4rem;
}
.list_container1 {
  margin-top: 2.5rem;
  margin-bottom: 4rem;
  border: 1px solid #f1f1f1;
  font-size: 1rem
}
.deliverable_address {
  background: #fff;
  margin-bottom: 3rem;
  overflow: auto;
}

.deliverable_address li {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #f1f1f1;
  justify-content: space-between;
}
.deliverable_address span:nth-child(2) {
  flex-grow: 5;
}
.choose_icon {
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  margin-right: 0.4rem;
}
.choose_icon i {
  font-size: 1.2rem;
  display: block;
}
.icon-selected1 {
  color: #aaa;
}
.choosed {
  color: #daca42;
}
.choose_content{
  margin-bottom: 0.8rem
}
.choose_content span:first-child {
  font-weight: 600;
  font-family: "Microsoft Yahei";
}
.choose_content span:last-child {
  margin-left: 1rem;
  font-size: 0.9rem;
}
.choose_place1 span:first-child {
  padding: 0.2rem 0.6rem;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.4rem;
}
.choose_place1 span:last-child {
  font-size: 0.9rem;
  color: #666;
}
.out_delivery {
  background: #f1f1f1;
  font-family: "Microsoft Yahei";
  padding: 0.4rem;
  color: #666;
  font-size: 0.9rem;
}
.out_delivery_container span {
  color: #ccc;
}
.add_address {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 204;
  background: #3190e8;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0.2rem
}
.remove_button {
  padding: 0.2rem 1rem;
  background-color: #428bca;
  border-color: #357ebd;
  color: #fff;
  border-radius: 0.2rem;
  border: 1px solid transparent;
  font-size: 0.8rem;
  z-index: 5;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

